<template>
    <div class="game-card-10200">
        <div class="box">
            <div class="item-box" :style="{'width': detail.gameList.length * 296 + 'px'}">
                <div class="item" v-for="(item, index) in detail.gameList" :key="index">
                    <img :src="item.cover" alt="">
                    <div class="title">{{item.title}}</div>
                    <div class="msg-box">
                        <div class="user-icon">
                            <!-- <img :src="item.author.userIcon" alt=""> -->
                        </div>
                        <div class="user-name">用户昵称</div>
                        <!-- <div class="user-name">{{item.author.nickname}}</div> -->
                        <div class="user-love">
                            <div class="love-icon"></div>
                            <div class="love-num">{{item.thumbsNum || 0}}</div>
                        </div>
                    </div>
                    <!-- <div class="item-title">{{item.appName}}</div> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'model10200',
    props: ['data'],
    data () {
        return {
            detail: {
                label: '',
                gameList: [
                    {
                        cover: '',
                        title: '',
                        author: {
                            userIcon: '',
                            nickname: ''
                        }
                    },
                    {
                        cover: '',
                        title: '',
                        author: {
                            userIcon: '',
                            nickname: ''
                        }
                    },
                    {
                        cover: '',
                        title: '',
                        author: {
                            userIcon: '',
                            nickname: ''
                        }
                    }
                ]
            }
        }
    },
    created () {
        if (this.data) {
            this.detail.label = this.data.label
        }
        if (this.data && this.data.gameList && this.data.gameList.length) {
            this.detail = this.data
        }
    },
    watch: {
        data: {
            handler: function (val) {
                if (val) {
                    this.detail.label = val.label
                }
                if (val && val.gameList && val.gameList.length) {
                    this.detail = val
                }
            },
            deep: true
        }
    }
}
</script>

<style lang="scss">
    .game-card-10200 {
        padding: 16px 0;
        border-bottom: 1px solid rgba(228,228,228,1);
        .box {
            padding-left: 16px;
            overflow-x: scroll;
            .item-box {
                display: flex;
                .item {
                    width:280px;
                    height:280px;
                    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
                    border-radius: 8px;
                    margin-right: 16px;
                    position: relative;
                    overflow: hidden;
                    > img {
                        width: 100%;
                        height: 100%;
                    }
                    .title {
                        position: absolute;
                        bottom: 40px;
                        left: 0;
                        width: 100%;
                        padding: 0 16px;
                        max-height:42px;
                        font-size:15px;
                        font-family:SourceHanSansCN-Medium,SourceHanSansCN;
                        font-weight:500;
                        color:rgba(255,255,255,1);
                        line-height:20px;
                        overflow: hidden;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        display: -webkit-box;
                    }
                    .msg-box {
                        position: absolute;
                        bottom: 12px;
                        left: 0;
                        width: 100%;
                        height: 20px;
                        padding: 0 16px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .user-icon {
                            width: 20px;
                            height: 20px;
                            margin-right: 8px;
                            border-radius: 50%;
                            overflow: hidden;
                            background-color: #f6c544;
                            > img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .user-name {
                            flex: 1;
                            font-size:12px;
                            font-family:SourceHanSansCN-Regular,SourceHanSansCN;
                            font-weight:400;
                            color:rgba(255,255,255,1);
                        }

                        .user-love {
                            height: 20px;
                            display: flex;
                            align-items: center;
                            .love-icon {
                                width: 10px;
                                height: 10px;
                                background-size: 100% 100%;
                                background-image: url('./img/hart.png');
                                margin-right: 4px;
                            }
                            .love-num {
                                font-size:12px;
                                line-height: 12px;
                                font-family:Roboto-Regular,Roboto;
                                font-weight:400;
                                color:rgba(255,255,255,1);
                            }
                        }
                    }
                }
            }
        }
    }
</style>
